<template>
	<kui-page :custom-header="false">
		<template v-slot:body>
			<view class="kui-mt-3">
				<kui-config-provider font-size="18px" color="#666">
					<view>
						<kui-text>基本使用</kui-text>
						<view class="kui-mt-3">
							<kui-image :src="src"></kui-image>
						</view>
					</view>
					<view class="kui-mt-3">
						<kui-text>填充模式【设置填充模式，宽高将失效】</kui-text>
						<view class="kui-mt-2">
							<kui-space :gap="[40,10]">
								<template v-for="(item, index) in fillList" :key="index">
									<view class="kui-w-full">
										<view class="kui-flex kui-flex-col">
											<kui-image :src="src" :mode="item"></kui-image>
											<view class="kui-text-center">
												<kui-text>{{ item }}</kui-text>
											</view>
										</view>
									</view>
								</template>
							</kui-space>
						</view>
					</view>
					<view class="kui-mt-3">
						<kui-text>设置圆角</kui-text>
						<view class="kui-mt-2">
							<kui-space :gap="[20,20]">
								<kui-image width="200rpx" height="200rpx" :radius="30" :src="src"></kui-image>
								<kui-image width="200rpx" height="200rpx" :radius="300" :src="src"></kui-image>
							</kui-space>
						</view>
					</view>
					<view class="kui-mt-3">
						<kui-text>加载失败</kui-text>
						<view class="kui-mt-3">
							<kui-image :src="src" error height="200px" :radius="30"></kui-image>
						</view>
					</view>
					<view class="kui-mt-3">
						<kui-text>点击事件</kui-text>
						<view class="kui-mt-2">
							<kui-space :gap="[20,20]">
								<kui-image width="440rpx" height="440rpx" :radius="30" :src="src" @click="onClick"></kui-image>
							</kui-space>
						</view>
					</view>
					<view class="kui-mt-3">
						<kui-text>图片预览</kui-text>
						<view class="kui-mt-2">
							<kui-space :gap="[20,20]">
								<kui-image width="440rpx" height="440rpx" :radius="30" :src="src" preview @click="onClick"></kui-image>
							</kui-space>
						</view>
					</view>
					<view class="kui-mt-3">
						<kui-text>懒加载</kui-text>
						<view class="kui-mt-3">
							<template v-for="i in 100" :key="i">
								<kui-image :src="src" height="200px" :radius="30" lazyload></kui-image>
							</template>
						</view>
					</view>
				</kui-config-provider>
			</view>
		</template>
	</kui-page>
</template>

<script lang="ts">
	
	export default {
		setup() {
			const src = 'https://www.kviewui.com/images/dog1.png';
			
			const fillList = [
				'aspectFill',
				'heightFix'
			];
			
			const onClick = () => {
				uni.showToast({
					title: '图片被点击'
				});
			}
			
			return {
				src,
				fillList,
				onClick
			}
		}
	}
</script>

<style>

</style>
